<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue实现倒计时</title>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
		<style>
			.red {
				color: #F00;
			}
		</style>
	</head>
	<body>
		<div id="demo">
			<!-- class的值在time小于等于3的时候，就变成red -->
			<!-- class让它等于一个响应式数据x，x开始是空字符串''，3秒钟之内x变成red-->
			<p :class="cla">{{ time }}秒</p>
		</div>
		<script>
			const { createApp, ref } = Vue
			const app = createApp({
				setup() {
					const time = ref(10)
					const cla = ref('')
					// 改变time的方法
					const i = setInterval(() => {
						time.value -- 
						// 达到3秒钟之内，字体变红
						if(time.value <= 3) {
							cla.value = 'red'
						}
						if(time.value <= 0) {
							clearInterval(i)
						}
					}, 1000)
					return { time, cla } // 返回数据和方法
				}
			})
			app.mount('#demo')
		</script>
	</body>
</html>